<template>
    <div>
        <!--面包屑-->
        <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--用户列表卡片-->
        <el-card class="box-card">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户名" label-width="70px">
                    <el-input v-model="formInline.inputUser" placeholder="请输入用户名" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="70px">
                    <el-input placeholder="请输入密码" v-model="formInline.inputPassword" show-password></el-input>
                </el-form-item>
                <el-form-item label="学号" label-width="70px">
                    <el-input v-model="formInline.inputNum" placeholder="请输入学号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="onCheck">查找</el-button>
                </el-form-item>
            </el-form>
            <!--表格内容显示区域-->
            <el-table
                :data="userList"
                border
                max-height="400"
                    style="width: 100%;">
                <el-table-column
                    sortable
                    prop="id"
                    label="#"
                    width="100">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="username"
                    label="用户名"
                    width="300">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="role"
                    label="权限"
                    width="150">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="studentId"
                    label="学生学号"
                    width="350">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="是否禁用"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  label="操作">
                  <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                  <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                  <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
                
                </el-table-column>
            </el-table>
            <el-pagination
            style="padding-top: 15px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { findUserList } from '../../api/users'

export default {
    name: 'Users',
    data() {
      return {
        formInline: {
          user: '',
          grade: '',
          radio: '1',
          inputName: '',
          inputNum: '',
          class: '',
          inputUser: '',
          inputPassword: ''
        },
        // 用户集合
        userList: [],
        //部门集合
        
        pageSize: 6,
        total: 100,
        current: 1
        
        
      }
    },
    created(){
      // 创建组件的时候调用查询所有用户的方法
      this.getUserList()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将value赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getUserList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getUserList();
      },
      async getUserList(){
       const {data} = await findUserList()
       console.log(data);
       this.userList = data.data.records;
      }
    }
}
</script>

<style scoped>

</style>